<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello Qunee</title>
    <link rel=stylesheet href=libs/bootstrap/css/bootstrap.css>
    <link rel=stylesheet href=libs/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css>
    <link rel=stylesheet href=src/css/graph.editor.css>

</head>
<body class="layout">
<div id="editor" data-options="region:'center'">
    <!--<div class="graph-editor__property"-->
    <!--data-options="region:'east', width: '20%', right: 15, min-width: 100, max-width: '300'"-->
    <!--style="position: absolute; box-sizing: border-box; top: 40px; right: 15px; width: 283px; height: 531px;">-->
    <!--<form class="form-horizontal" style="">-->
    <!--<script>-->
    <!--function onvaluechange(evt){-->

    <!--}-->
    <!--</script>-->
    <!--<div class="class-group">-->
    <!--<h4>Element</h4>-->
    <!--<div class="form-group">-->
    <!--<label class="col-sm-6 control-label font-small">Name</label>-->
    <!--<div class="input-group input-group-sm col-sm-6">-->
    <!--<input type="text" value="" onchange="onvaluechange(event)" class="form-control"/>-->
    <!--</div>-->
    <!--</div>-->
    <!--<div class="form-group">-->
    <!--<label class="col-sm-6 control-label font-small" >Background Color</label>-->
    <!--<div class="input-group input-group-sm color-picker col-sm-6">-->
    <!--<input type="text" value="#EEE" class="form-control"/>-->
    <!--<span class="input-group-addon"><i></i></span>-->
    <!--</div>-->
    <!--</div>-->
    <!--<div class="form-group">-->
    <!--<label class="col-sm-6 control-label font-small">Line Width</label>-->
    <!--<div class="input-group input-group-sm col-sm-6">-->
    <!--<input class="form-control" type="number" value="1" min="1" max="10"/>-->
    <!--</div>-->
    <!--</div>-->
    <!--</div>-->
    <!--</form>-->
    <!--</div>-->
</div>
<script src="http://demo.qunee.com/lib/qunee-min.js?v=1.8"></script>
<!-- build:js libs/js.js -->
<script src="libs/jquery.min.js"></script>
<script src="libs/bootstrap/js/bootstrap.min.js"></script>
<script src="libs/layout.border.js"></script>
<script src="libs/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js"></script>
<!-- endbuild -->
<!-- build:js libs/graph.editor.js -->
<script src="src/common/i18n.js"></script>
<script src="src/common/DomSupport.js"></script>
<script src="src/common/DragSupport.js"></script>
<script src="src/common/FileSupport.js"></script>
<script src="src/common/JSONSerializer.js"></script>
<script src="src/common/ExportPane.js"></script>
<script src="src/common/Toolbar.js"></script>
<script src="src/common/ToolBox.js"></script>
<script src="src/common/PopupMenu.js"></script>
<script src="src/common/PropertyPane.js"></script>
<script src="src/graph.editor.js"></script>
<!-- endbuild -->
<script>
    Q.registerImage('lamp', Q.Shapes.getShape(Q.Consts.SHAPE_CIRCLE, -8, -8, 16, 16));

    $('#editor').graphEditor({
        saveService: 'save',
        callback: function (editor) {
            var graph = editor.graph;
            var node = graph.createNode('Node');
            var text = graph.createText('Text', 100, 100);
            graph.createEdge(node, text);
            graph.moveToCenter();

            graph.onclick = function(){
                if(graph.popupmenu){
                    graph.popupmenuOld = graph.popupmenu;
                    graph.popupmenu = null
                }else{
                    graph.popupmenu = graph.popupmenuOld;
                }
            }
        }
    });

    //    function restore() {
    //        var xhr = new XMLHttpRequest();
    //        xhr.open('post', '/restore', true);
    //        xhr.onload = function () {
    //            alert('restore database');
    //        };
    //        xhr.onerror = function (e) {
    //            showInfo('restore error');
    //        };
    //        xhr.setRequestHeader('Content-Type', 'application/json');
    //        xhr.send();
    //    }
</script>
</body>
</html>